<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="zzzzzz" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>${profileOwner.username}</title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<%@ include file="/WEB-INF/common/global_style.jsp" %>
	<%@ include file="/WEB-INF/common/global_script.jsp" %>
	<script type="text/javascript" src="${ctx}/res/js/follow_unfollow.js" ></script>
</head>
<body class="light-gray-bg">

<%@ include file="/WEB-INF/common/header.jsp" %>

<div class="wrapper-content">
	<div id="profile" class="site-wrap wrap">
		<div class="profile-wrap wrap">
			<div class="profile-card">
				<div class="profile-card-inner clearfix">
					<a href="${ctx}/profile/${profileOwner.userId}" class="profile-pic">
						<c:choose>
							<c:when test="${profileOwner.portraitId == null || empty profileOwner.portraitId}">
								<img src="${ctx}/res/images/default_portrait.png" class="thumb thumb_128"/>
							</c:when>
							<c:otherwise>
								<img src="${ctx}/image/${profileOwner.portraitId}" class="thumb thumb_128"/>
							</c:otherwise>
						</c:choose>
					</a>
					<div class="profile-info">
						<div class="clearfix mbl">
							<span class="username lfloat">${profileOwner.username}</span>
							<shiro:authenticated>
								<c:choose>
									<c:when test="${profileOwner.userId == currentUser.userId}">
										<a href="${ctx}/settings/profile" class="btn silver medium rfloat" >Edit profile</a>
									</c:when>
									<c:otherwise>
									
									<c:choose>
										<c:when test="${isFollowing}">
											<a href="#follow_unfollow_link" data-user-id="${profileOwner.userId}" class="btn-follow btn silver medium following rfloat">
										</c:when>
										<c:otherwise>
											<a href="#follow_unfollow_link" data-user-id="${profileOwner.userId}" class="btn-follow btn silver medium follow rfloat">
										</c:otherwise>
									</c:choose>
									<span class="z-follow">Follow</span><span class="z-following">Following</span><span class="z-unfollow">Unfollow</span></a>
									</c:otherwise>
								</c:choose>
							</shiro:authenticated>
						</div>
						
						<div class="clearfix">
							<div class="lfloat" style="width: 620px;">
								<p class="fcl fsti">${profileOwner.aboutMe}</p>
							</div>
							<div class="following-followers">
								<ul class="follow-index style2 index horizontal">
									<li>
										<a href="${ctx}/connections/following/${profileOwner.userId}"><div class="fsxxl">${followingNum}</div><span>following</span></a>
									</li>
									<li>
										<a href="${ctx}/connections/followers/${profileOwner.userId}"><div class="fsxxl">${followersNum}</div><span>followers</span></a>
									</li>
								</ul>
								
								<span class="z-vertical-rule-main"></span>
								<span class="z-vertical-rule-corner-top"></span>
								<span class="z-vertical-rule-corner-bottom"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div align="center" class="mbl fsl" style="margin-top: -30px;"><a class="dark fwb" href="#explore">${numOfTopicsWhichUserCreate} topics</a> · <a class="dark" href="#">${numOfTopicsWhichUserLike} likes</a></div>
			
		</div>
	</div>
</div>

<div id="back_to_top"><span class="arrow-n"></span></div>

<script type="text/javascript">

jq(document).ready(function() {
	
	new FollowUnfollow({
		'j_follow_unfollow_link' : jq('a[href="#follow_unfollow_link"]'),
		'_follow_url' : "${ctx}/users/follow",
		'_unfollow_url' : "${ctx}/users/unfollow"
	});
	
});

</script>

<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
</html>